<template>
  <div class="details_box">
    <el-table
      :row-class-name="tableRowClassName"
      :data="useList"
      style="width: 100%"
      height="100px"
      v-adaptive="{ bottomOffset: 70 }"
      :header-cell-class-name="headerRowStyle"
    >
      <el-table-column prop="date" label="序号" type="index" width="60">
      </el-table-column>
      <el-table-column prop="batchNumber" label="批号号"> </el-table-column>
      <el-table-column prop="partNumber" label="零件号"> </el-table-column>

      <el-table-column prop="partName" label="零件名称"> </el-table-column>
      <el-table-column prop="processNumber" label="工序号"> </el-table-column>
      <el-table-column prop="processName" label="工序名称"> </el-table-column>
      <el-table-column prop="materialName" label="设备类型">
        <template slot-scope="scope">
          {{
            scope.row.deviceAssignment &&
            scope.row.deviceAssignment.deviceTypeName
          }}
        </template>
      </el-table-column>
      <el-table-column prop="materialName" label="设备编号">
        <template slot-scope="scope">
          {{
            scope.row.deviceAssignment &&
            scope.row.deviceAssignment.deviceList
              .map((item) => item.deviceName)
              .join(",")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="toolingNumber" label="工装数"> </el-table-column>
      <el-table-column prop="toolingPartsNumber" label="工装零件数">
      </el-table-column>
      <el-table-column prop="partTotalNumber" label="来件数量">
      </el-table-column>
    </el-table>
    <div class="my_pag">
      <el-pagination
        background
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { formulaList } from "@/api/assets";
import { CASTING_TYPE, TENANT_TITLE } from "@/utils/local";
export default {
  data() {
    return {
      currentPage4: 4,
      setHeight: 300,
      tableData: [],
      rowColorData: {},
    };
  },
  computed: {
    isCasting() {
      const { name } = this.$store.getters.tenant;
      return name == TENANT_TITLE[2];
    },
    useList() {
      if (this.isCasting) {
        let i = 0;
        return this.tableData.map((item) => {
          i++;
          if (i > 2) {
            i = 0;
          }
          return {
            ...item,
            processName: CASTING_TYPE[i],
          };
        });
      } else {
        return this.tableData;
      }
    },
  },
  mounted() {
    this.getfurnaceRecipeData();
  },
  methods: {
    // /获取合炉配方列表
    getfurnaceRecipeData() {
      var that = this;
      formulaList().then((res) => {
        that.tableData = res.data.results;
        that.initTechnologyParameter();
      });
    },
    initTechnologyParameter() {
      var labels = [];
      this.tableData.forEach((item1) => {
        this.initRowColor(item1.categoryCode);
        if (item1.technologyParameter) {
          item1.technologyParameter.forEach((item2) => {
            if ($.inArray(item2.key, labels) == -1) {
              labels.push(item2.key);
            }
          });
        }
      });
      // this.otherLabels = labels;
    },
    headerRowStyle() {
      return "success-row";
    },

    //table颜色
    tableRowClassName({ row }) {
      console.log(this.rowColorData[row.categoryCode], "row");
      return this.rowColorData[row.categoryCode];
    },
    initRowColor(code) {
      if (JSON.stringify(this.rowColorData) === "{}") {
        this.rowColorData[code] = "row_color_1";
      } else {
        if (!this.rowColorData[code]) {
          var lastdata = this.rowColorData[code - 1];
          let n = parseInt(lastdata.substring(lastdata.length - 1));
          if (n == 5) {
            this.rowColorData[code] = "row_color_1";
          } else {
            this.rowColorData[code] = "row_color_" + (n + 1);
          }
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.details_box {
  /deep/ .el-table {
    .row_color_1 {
      background: #093085;
      .cell {
        color: #fff;
      }
    }
    .row_color_2 {
      background: #002675;
      .cell {
        color: #fff;
      }
    }
    .row_color_3 {
      background: #e9b23a;
      .cell {
        color: #fff;
      }
    }
    .row_color_4 {
      background: #53b2e9;
      .cell {
        color: #fff;
      }
    }
    .row_color_5 {
      background: #e2f069;
      .cell {
        color: #fff;
      }
    }
  }
  /* background-color: #010b48; */
  .my_pag {
    text-align: center;
    margin-top: 10px;
    color: #fff;
    /deep/ .el-pagination button {
      background-color: inherit;
      .el-icon {
        color: #fff;
      }
    }
    /deep/ .el-pager {
      background-color: inherit;
      li {
        background-color: inherit;
        color: #fff;
      }
    }
    /deep/ .el-pagination__jump {
      color: #fff;
    }
    /deep/ .el-input__inner {
      background-color: #010b47;
      color: #fff;
      border: 1px solid #0da9f2;
    }
    /deep/ .el-pagination__total {
      color: #fff;
    }
  }
  /deep/ .gutter {
    display: none;
  }
  /deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  padding: 20px;
  margin-top: -30px;
  height: 100%;
  /deep/ .el-table {
    margin-top: 20px;
    background-color: #093085 !important;
    border: 1px solid #0da9f2;
    .el-table__row:hover > td {
      background-color: inherit !important;
    }
    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }
    .el-table__row--striped:hover > td {
      background-color: inherit;
    }
    .warning-row {
      background: #093085 !important;
      color: #fff;
    }
    .success-row {
      background: #002675;
      color: #fff;
    }
  }
}
//table行设置颜色
</style>
